<template>
  <div>
    <el-table :data="tableData" height="250" border style="width: 100%">
      <el-table-column prop="list" width="50"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="tel" label="电话"> </el-table-column>
      <el-table-column prop="jiaose" label="角色"> </el-table-column>
      <el-table-column prop="zhuangtai" label="状态" width="80">
        <el-switch
          v-model="zhuangtai"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-table-column>
      <el-table-column class="btn" prop="caozuo" label="操作">
        <el-button size="mini" type="primary">主</el-button>
        <el-button size="mini" type="danger">危</el-button>
        <el-button size="mini" type="warning">警</el-button>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import { fetchUsers } from 'api'
export default {
  data () {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [
        {
          list: '1',
          name: '王小虎',
          email: '12341235qq.com',
          tel: 11111111111,
          jiaose: '超级管理员',
          zhuangtai: false
        },
        {
          list: '2',
          name: '王小虎',
          email: '12341235qq.com',
          tel: 11111111111,
          jiaose: '超级管理员',
          zhuangtai: true
        },
        {
          list: '3',
          name: '王小虎',
          email: '12341235qq.com',
          tel: 11111111111,
          jiaose: '超级管理员',
          zhuangtai: false
        },
        {
          list: '4',
          name: '王小虎',
          email: '12341235qq.com',
          tel: 11111111111,
          jiaose: '超级管理员',
          zhuangtai: true
        }
      ]
    }
  },
  created () {
    this.fetchUsers()
  },
  methods: {
    // 获取用户数据
    fetchUsers () {
      fetchUsers({
        pagenum: 1,
        pagesize: 5
      }).then(res => {
        console.log(res)
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.btn{
  display: flex;
  align-items: center;
}
.block{
  margin-top: 10px;
}
</style>
